<template>
  <div class="common-box-container table-view-box">
    <div class="table-tools-box">
      <div class="tools-search-box">
        <el-form ref="queryForm" 
          class="table-query-box"
          :model="queryParams" 
          label-width="100px">
          <el-row :gutter="16">
            <el-col :span="6">
              <el-form-item label="项目">
                <el-input v-model="queryParams.projectName"
                placeholder="项目编码/项目名称/项目经理"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属地区">
                <CustomTreeSelect
                  clearable
                  multiple
                  show-search
                  nodeKey="code"
                  v-model="queryParams.projRegion"
                  :treeData="projRegionTreeData"
                  :treeProps="projRegionTreeProps"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="项目类型">
                <el-select
                  v-model="queryParams.projType"
                  style="width: 100%;"
                  placeholder="请选择项目类型"
                  clearable
                >
                  <el-option
                    v-for="item in projTypeList"
                    :key="item.code"
                    :label="item.title"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属年度">
                <el-select
                  v-model="queryParams.projYear"
                  style="width: 100%;"
                  placeholder="请选择年度"
                  clearable
                >
                  <el-option
                    v-for="item in yearsArrayData"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="6">
              <el-form-item label="项目状态">
                <el-select
                  v-model="queryParams.projStatus"
                  style="width: 100%;"
                  placeholder="请选择项目状态"
                  clearable
                >
                  <el-option
                    v-for="item in projStatusList"
                    :key="item.code"
                    :label="item.text"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="tools-btn-box">
        <div class="btn-box-left">
          <el-button class="tools-btn" type="primary" @click="handleAddClick">添加</el-button>
          <el-button class="tools-btn" type="primary" @click="handleEditClick">编辑</el-button>
          <el-button class="tools-btn" type="primary" @click="handleSearch">查询</el-button>
        </div>
      </div>
    </div>
    <div class="table-body-box">
      <el-table
        ref='projListTable'
        border
        highlight-current-row
        :data="tableData"
        @selection-change="handleSelectionChange"
        @current-change="handleCurrentChange"
        style="width: 100%">
        <el-table-column
          type="selection"
          align="center"
          width="55">
        </el-table-column>
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column
          prop="projCode"
          label="项目编码"
          align="left"
          width="220">
        </el-table-column>
        <el-table-column
          prop="projName"
          label="项目名称"
          align="left">
        </el-table-column>
        <el-table-column
          prop="projType"
          label="项目类型"
          align="center"
          width="100">
        </el-table-column>
        <el-table-column
          prop="projRegion"
          label="所属地区"
          align="center"
          width="100">
        </el-table-column>
        <el-table-column
          prop="projYear"
          label="所属年度"
          align="center"
          width="100">
        </el-table-column>
        <el-table-column
          prop="projManager"
          label="项目经理"
          align="left"
          width="100">
        </el-table-column>
        <el-table-column
          prop="projSaleManager"
          label="商务经理"
          align="left"
          width="100">
        </el-table-column>
      </el-table>
      <pagination 
        :total="pagination.total" 
        :page.sync="pagination.pageNo" 
        :limit.sync="pagination.pageSize"
        @pagination="handlePagination" />
    </div>
    <ProjAddDialog 
      :visible="addDialogVisible"
      @close="addDialogVisible = false"
      @success="addDialogVisible = false"
    />

    <ProjEditDialog
      ref="projEditDialog"
      @close="handleEditSuccess"
      @success="handleEditSuccess"
    />
  </div>
</template>

<script>
import {
  PROJ_TYPE_SELECT_DATA, 
  PROJ_STATUS_SELECT_DATA,
} from '@/enum/enum-project'
import { yearsData } from '@/enum/enum-common'
import { ProjMaintainList } from '@/mock/proj-data.js'
import { QG_QH_TREE_DATA } from '@/mock/tree-data'

import Pagination from '@/components/pagination'
import ProjAddDialog from './components/ProjAddDialog'
import ProjEditDialog from './components/ProjEditDialog'
import CustomTreeSelect from '@/components/select/CustomTreeSelect'

const defaultQueryParams = {
  projName: '',
  projRegion: [],
  projType: '',
  projYear: new Date().getFullYear().toString(),
  projStatus: ''
}

const defaultTreeData = [...QG_QH_TREE_DATA[0].children]

export default {
  name: 'ProjMaintain',
  components: {
    Pagination,
    ProjAddDialog,
    ProjEditDialog,
    CustomTreeSelect
  },
  data() {
    return {
      queryParams: { ...defaultQueryParams },
      pagination: {
        total: 50, // 总记录数
        pageNo: 1, // 当前页
        pageSize: 10, // 每页展示数量
      },
      tableSetting: {
        multipleSelection: [],
        currentRow: ''
      },
      tableData: [...ProjMaintainList],
      addDialogVisible: false,
      projRegionTreeData: [...defaultTreeData],
      projRegionTreeProps: {
        label: 'name',
        children: 'children'
      },
    }
  },
  computed: {
    projTypeList: () => PROJ_TYPE_SELECT_DATA,
    projStatusList: () => PROJ_STATUS_SELECT_DATA,
    yearsArrayData: () => yearsData,
    tableRef () {
      return this.$refs.projListTable
    },
    editDialogRef () {
      return this.$refs.projEditDialog
    }
  },
  methods: {
    handlePagination (values) {
      // console.log("handlePagination", values)
      this.pagination.pageNo = values.page
      this.pagination.pageSize = values.limit
    },
    handleSelectionChange (values) {
      this.tableSetting.multipleSelection = values
    },
    handleCurrentChange (value) {
      console.log("handleCurrentChange", value)
      this.tableSetting.currentRow = value
    },
    handleAddClick () {
      this.addDialogVisible = true
    },
    handleEditClick () {
      const { tableSetting: { multipleSelection } } = this
      if (multipleSelection && multipleSelection.length === 1) {
        this.editDialogRef.handleOpen({ ...multipleSelection[0] })
      } else {
        this.$alert('请选择一条数据', '系统提示', {
          confirmButtonText: '确定',
          type: 'warning',
          callback: action => {
          }
        })
      }
    },
    handleEditSuccess () {
      this.tableRef.setCurrentRow()
      this.tableRef.clearSelection()
    },
    handleSearch () {
      const { queryParams, pagination } = this
      console.log('queryParams', {
        ...queryParams,
        ...{
          projRegion: queryParams.projRegion.join(','),
          pageNo: pagination.pageNo,
          pageSize: pagination.pageSize,
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>

</style>